<template>
    <div class="operation">
        <n-modal :show-icon="false" v-model:show="showModal" preset="dialog" :title="title" style="width:50%"
            :on-positive-click="submitCallback" :on-close="cancelCallback">
            <div class="modalBox">
                <n-form ref="formRef" :model="fromData" :rules="rules">
                    <n-form-item label="昵称" path="createData.roleName">
                        <n-input placeholder="请输入" v-model:value="fromData.createData.roleName" clearable />
                    </n-form-item>
                    <n-form-item label="备注" path="createData.remark">
                        <n-input placeholder="备注" type="textarea" v-model:value="fromData.createData.remark" :autosize="{
                            minRows: 2,
                            maxRows: 5
                        }" clearable />
                    </n-form-item>
                </n-form>
            </div>
            <template #action>
                <n-space>
                    <n-button @click="cancelCallback">取消</n-button>
                    <n-button type="info" :loading="formBtnLoading" @click="submitCallback">确定</n-button>
                </n-space>
            </template>
        </n-modal>
    </div>
</template>
<script lang="ts">

import { defineComponent, ref, reactive, toRefs } from 'vue'
import { FormInst, FormItemRule, useMessage } from 'naive-ui'
import { roleOperate } from '../../../../api/role.js'
const message = useMessage()
export default defineComponent({
    setup(props, { emit }) {
        const showModal = ref(false)
        const formRef = ref(false)
        const state = reactive({
            formBtnLoading: false,
            action: '',
            title: ''
        })
        const createvalue = ref({
            createData: {
                roleName: '',
                remark: ''
            }
        })
        let rules = {
            createData: {
                roleName: {
                    required: true,
                    message: "请输入角色名",
                    trigger: 'blur',
                },
                remark: {
                    required: false,
                    message: "请输入备注",
                    trigger: 'blur',
                }
            }
        }
        //  确定
        const methods = reactive({
            submitCallback(e) {
                // showModal.value = false
                e.preventDefault()
                //@ts-ignore
                formRef.value?.validate((errors) => {
                    if (!errors) {
                        if (state.action == 'create') {
                            let parms = Object.assign(createvalue.value.createData, { action: 'create' })
                            roleOperate(parms).then(item => {
                                showModal.value = false
                                methods.cleaInput()
                                message.success('创建成功')
                                emit('addUserClear',{})
                            })
                            return
                        }
                        if(state.action == 'edit'){
                             let parms = Object.assign(createvalue.value.createData, { action: 'edit' })
                            roleOperate(parms).then(item => {
                                showModal.value = false
                                methods.cleaInput()
                                message.success('修改成功')
                                emit('addUserClear',{})
                            }) 
                        }

                    }
                })
            },
            //  取消
            cancelCallback() {
                showModal.value = false
                methods.cleaInput()
            },
            //接收父组件的值
            myCommand(item) {
                state.title = '创建用户'
                state.action = item.action
                showModal.value = true
                if (item.action == 'edit') {
                    state.title = '编辑用户'
                    createvalue.value.createData.roleName = item.value.roleName
                    createvalue.value.createData.remark = item.value.remark
                    createvalue.value.createData['_id']=item.value._id
                }
            },
            cleaInput() {
                //@ts-ignore
                createvalue.value.createData ={}
               
            }

        })

        return {
            showModal,
            formRef,
            ...toRefs(state),
            ...toRefs(methods),
            rules,
            fromData: createvalue
        }
    }
})

</script>